<template>
  <Card :bordered="false">
    <div slot="title" class="clear">
      <Button type="primary" class="addBtn" @click="showModal('add')">新增</Button>
    </div>
    <Table :loading="loading" :columns="columns" :data="getData.items"></Table>
    <div class="clear">
      <Page
        class="pageNation"
        :total="getData.total"
        :current="getData.page"
        :page-size="getData.size"
        show-elevator
        show-total
        show-sizer
        @on-page-size-change="size => changePageSize(size)"
        @on-change="pageNo => pageNation(pageNo)">
      </Page>
    </div>
    <AddUserModal
      :isShowModal="visiable"
      :modalTitle="modalTitle"
      :rowData="rowData"
      @handleSubmit="handleSubmit"
      @closeModal="closeModal"
    />
    <ResetPasswordModal
      :isShowModal="isShowResetPassword"
      :rowData="rowData"
      @closeModal="closePasswordModal"
    />
  </Card>
</template>

<script>
import { Divider } from 'iview'
import dayjs from 'dayjs'
import AddUserModal from './components/AddUserModal'
import ResetPasswordModal from './components/ResetPasswordModal'
import { queryUrseListData, deleteUser } from '@/api/user-manage.js'

export default {
  name: 'user-manage',
  components: { AddUserModal, ResetPasswordModal },
  data () {
    return {
      loading: false,
      columns: [],
      visiable: false,
      isShowResetPassword: false,
      modalTitle: '新增用户',
      rowData: {},
      getData: {
        items: []
      }
    }
  },
  methods: {
    showModal (type) {
      if (type === 'add') {
        this.modalTitle = '新增用户'
      } else {
        this.modalTitle = '编辑用户'
      }
      this.visiable = true
    },
    closeModal () {
      this.visiable = false
      this.rowData = {}
    },
    handleSubmit () {
      this.closeModal()
      const pageNo = this.getData.page
      this.queryTableData({page: pageNo})
    },
    closePasswordModal () {
      this.isShowResetPassword = false
    },
    setColumns () {
      this.columns = [
        {
          key: 'userName',
          title: '姓名'
        }, {
          key: 'account',
          title: '账号'
        }, {
          key: 'deptName',
          title: '部门'
        }, {
          key: 'roleInfo',
          title: '角色',
          render: (h, { row }) => {
            return <span>{row.roleInfo.map(item => item.roleName).join('、')}</span>
          }
        }, {
          key: 'phone',
          title: '手机号'
        }, {
          key: 'email',
          title: '邮箱'
        }, {
          key: 'description',
          title: '备注'
        }, {
          key: 'createUserName',
          title: '创建人'
        }, {
          key: 'createTime',
          title: '创建时间',
          render: (h, { row }) => {
            return (
              <span>{dayjs().format('YYYY-MM-DD')}</span>
            )
          }
        }, {
          key: 'action',
          title: '操作',
          width: 170,
          render: (h, { row }) => {
            const self = this
            return (
              <span>
                <a onClick={ () => self.handleEdit(row) } >编辑</a>
                <Divider type="vertical" />
                <a onClick={ () => self.handleDelete(row) }>删除</a>
                <Divider type="vertical" />
                <a onClick={ () => self.resetPassword(row) }>重置密码</a>
              </span>
            )
          }
        }
      ]
    },
    handleEdit (row) {
      this.showModal('edit')
      this.rowData = row
    },
    handleDelete (row) {
      const self = this
      this.$Modal.confirm({
        title: '您确定删除该用户？',
        content: '',
        onOk: function () {
          deleteUser(row.userCode).then((response) => {
            const { data } = response
            if (data.code === 2000) {
              self.queryTableData({page: self.getData.page})
              this.$Message.success('删除成功')
            } else {
              this.$Message.error(data.msg || '系统错误，请稍后再试')
            }
          })
        }
      })
    },
    resetPassword (row) {
      this.isShowResetPassword = true
      this.rowData = row
    },
    pageNation (pageNo) {
      this.queryTableData({page: pageNo})
    },
    changePageSize (size) {
      const { page } = this.getData
      this.queryTableData({size, page})
    },
    queryTableData ({page = 1, size = 10}) {
      this.loading = true
      queryUrseListData({page, size}).then((response) => {
        const { data } = response
        if (data.code === 2000) {
          this.getData = data.data
        } else {
          this.$Message.error(data.msg || '系统错误，请稍后再试')
        }
        this.loading = false
      })
    }
  },
  mounted () {
    this.setColumns()
    this.queryTableData({page: 1})
  }
}
</script>
<style lang="less">
  .addBtn {
    float: right;
  }
  .pageNation {
    float: right;
    margin-top: 20px;
  }
</style>
